<script>
import router from "@/router";

export default {
    name:'index',
  mounted() {

    this.$http.get("user/name").then(resp=>{
      this.loginName = resp.data.data
    })
  },
  methods:{
    showSubscribe(){
      this.isShow = true
      this.displayUser=false;
      this.isShowSubscribe = false
      this.isShowRequest = true
      this.isShowBrand = true
      this.isShowComments = true;
      this.isShowHome = true;
    },
    showRequest(){
      this.isShow = true
      this.displayUser=false;
      this.isShowRequest = false
      this.isShowSubscribe = true
      this.isShowBrand = true
      this.isShowComments = true;
      this.isShowHome = true;
    },
    showBrand(){
      this.isShow = true
      this.displayUser=false;
      this.isShowBrand = false
      this.isShowSubscribe = true
      this.isShowRequest = true
      this.isShowComments = true;
      this.isShowHome = true;
    },
    showComments(){
      this.isShow = true
      this.displayUser=false;
      this.isShowComments = false;
      this.isShowSubscribe = true
      this.isShowRequest = true
      this.isShowBrand = true
      this.isShowHome = true;
    },
    showHome(){
      console.log("txxx")
      this.isShow = true
      this.displayUser=false;
      this.isShowHome = false;
      this.isShowSubscribe = true
      this.isShowRequest = true
      this.isShowBrand = true
      this.isShowComments = true;
    },

    updateUserPassword(user){
      this.$refs.user.validate(valid => {
        //表单验证失败
        if (!valid) {

          return;
        }
        //表单验证通过之后执行的代码
        this.$http.put("user/update_user").then(resp=>{
          if (resp.data.code == 200){
            localStorage.removeItem("token")
            this.$message({
              type: 'success',
              message: '修改成功,请重新登录账户!'
            });
            this.$router.push({name:'login'})
          }
          this.dialogVisible = false
        })
      });
    },
    //关闭弹窗
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            this.user={}
            done();
          })
          .catch(_ => {});
    },
    //展示修改密码
    showUpdateUserPassword(){
      this.dialogVisible=true
      this.user.loginName = this.loginName
      this.$http.post("user/one_user",this.user).then(resp=>{
        if (resp.data.code == 200){
          this.user = resp.data.data
        }
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
      //展示后台管理
    ground(){
      this.isShowHome = true;
      this.isShowSubscribe = true
      this.isShowRequest = true
      this.isShowBrand = true
      this.isShowComments = true;
      this.clickTimes++;
      this.isShow=!this.isShow
      if (this.isShow){
        this.displayUser=false;

        if (this.$route.path != '/home'){
          this.$router.push({name:'home'})
        }
      }else {
        this.displayUser=true;

        console.log()

      }

    },
    mouseoverImg(){
      this.imgSrc= require('../assets/img/tuichu2.png')
      },
    mouseoutImg(){
      this.imgSrc= require('../assets/img/tuichu.png')
    },
      loginOut(){
        this.$confirm('确认退出吗？')
            .then(_ => {
              this.$http.get("user/logout").then(resp=>{
                if (resp.data.code == 200){
                  localStorage.removeItem("token")
                  this.$message({
                    type: 'success',
                    message: '退出成功!'
                  });
                  this.$router.push({name:'login'})
                }

              })

            })
            .catch(_ => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
      },
  },
    data(){
      var checkEmail = (rule, value,callback) =>{//验证邮箱
        const regEmail = /^([a-zA-Z]|[0-9])(\w|\\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(this.user.email != '' && !regEmail.test(this.user.email)) {
          callback(new Error('请输入有效的邮箱'));
        }
      }
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名称'));
        } else {
          if (value.length>20) {
            callback(new Error('名称过长'));
          }
          callback();
        }
      }
      var validateLoginName = (rule, value, callback) => {

        if (value === '') {
          callback(new Error('请输入登录名称'));
        } else {
          if (value.length>20) {
            callback(new Error('登录名称过长'));
          }
          callback();
        }
      }
      var validatePass = (rule, value, callback) => {
        console.log(value)
        if (value === '' || value == undefined) {
          callback(new Error('请输入密码'));
        } else {
          if (value.length>20) {
            callback(new Error('密码过长'));
          }
          callback();
        }
      };
        return{
          isShowSubscribe:true,
          isShowRequest:true,
          isShowBrand:true,
          isShowComments:true,
          isShowHome:true,
          rules: {
            password: [
              { validator: validatePass, trigger: 'blur' }
            ],
            loginName:[
              {validator: validateLoginName, trigger: 'blur' }
            ],
            name:[
              {validator: validateName, trigger: 'blur' }
            ],
            phone: [
              { required: true, message: '手机号必填', trigger: 'blur' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
            ],
            email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },
              {validator: checkEmail, trigger: "blur" }
            ]

          },
          disabled:false,
          showNewPassword:false,
          showNewPassword2:false,
          password2:"",
          dialogVisible: false,
          activeIndex: '1',
          loginName:"",
          isShow:true,
          imgSrc:require('../assets/img/tuichu.png'),
          displayUser:false,
          clickTimes:0,
          user:{
            password:"",
          }

        }
    }

}


</script>

<template>
  <div class="box">
    <div class="left-box">

      <div style="position: relative; top: 10%; color: black; font-size: 16px;display: flex;flex-direction: column;justify-content: center;align-items: center">
        <a href="https://www.xiaoxianyv.cn"><img src="../assets/img/logo.png" style="width: 100px" alt="logo"></a>
        <span>海南鑫宇盛<br>电子商务有限公司</span>
      </div>
      <div :class="[isShowHome ? 'home' : 'home_change']" @click="showHome">
        <router-link to="home" >首&ensp;&ensp;&ensp;&ensp;页</router-link></div>
      <div :class="[isShowComments ? 'home' : 'home_change']" @click="showComments">
        <router-link to="comments">客户评论</router-link>
      </div>
      <div :class="[isShowBrand ? 'brand' : 'brand_change']" @click="showBrand">
        <router-link to="/explosive">爆品管理</router-link>
      </div>
      <div :class="[isShowRequest ? 'request' : 'request_change']" @click="showRequest">
        <router-link to="/request">报价请求</router-link>
      </div>
      <div :class="[isShowSubscribe ? 'subscribe' : 'subscribe_change']" @click="showSubscribe">
        <router-link to="/subscribe">订阅管理</router-link>
      </div>


    <div class="select">
      <div :class="[isShow ? 'ground' : 'ground_change']" @click="ground">后台管理</div>
      <div class="user" v-if="displayUser">
        <router-link to="user">员工管理</router-link>
        </div>
      <div class="role" v-if="displayUser">
        <router-link to="role">角色管理</router-link>
      </div>
      <div class="user" v-if="displayUser">
        <router-link to="menu">权限管理</router-link>
      </div>
  </div>

  </div>
    <div class="right-box">
      <div class="right-box-top">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  >
          <el-submenu index="1">
            <template slot="title">欢迎您:{{loginName}}</template>
            <el-menu-item index="2" @click="showUpdateUserPassword">查看个人信息</el-menu-item>
          </el-submenu>

        </el-menu>
        <img :src="imgSrc" @mouseover="mouseoverImg" @mouseout="mouseoutImg" @click="loginOut" alt="" style="position: absolute;"/>

      </div>
      <!--添加form表单-->
      <el-dialog
          title="编辑当前用户信息"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-form ref="user" :model="user" label-width="80px"  :rules="rules">
          <el-form-item label="登录名称" prop="loginName">
            <el-input v-model="user.loginName"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="user.name"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password"> <!--v-show="isShow"-->
            <el-input v-model="user.password" show-password></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio v-model="user.sex" label="男">男</el-radio>
            <el-radio v-model="user.sex" label="女">女</el-radio>
          </el-form-item>

          <el-form-item label="电话" prop="phone">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>

          <el-form-item label="邮箱" prop="email">
            <el-input v-model="user.email"></el-input>
          </el-form-item>

          <el-form-item label="状态" >
            <el-tooltip  :content="'当前状态: ' + user.status" placement="top">
              <el-switch
                  v-model="user.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="启用"
                  inactive-value="禁用">
              </el-switch>
            </el-tooltip>
          </el-form-item>


        </el-form>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserPassword('user')">确 定</el-button>

      </el-dialog>
      <div class="right-box-bottom">
        <keep-alive exclude="email">
          <router-view></router-view>
        </keep-alive>

      </div>
    </div>
  </div>
</template>

<style scoped>
.el-submenu /deep/ .el-submenu__title {
  font-size: 20px !important;
}
.el-menu-item{
  font-size: 15px !important;
}
      *{
        margin: 0;
        padding: 0;
        top: 0;
      }
      a{
        text-decoration: none;
        color: black;
      }
      .box{
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #f6f9fe;

      }
      .left-box{
        left: 0;
        position:fixed;

        width: 220px;
        height: 100%;
        background-color: #ffffff;
        color: #2e67f0;
        text-align: center;
        box-shadow: 1px 0 5px 0.115px #7e8994;
      }
      .left-box a:link{
        color: #2e67f0;
      }
      .home{
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        color: #2561ef;

      }
       a{
        color: #2e67f0;
      }
      .home:hover{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;

        padding-right: 8px;
      }
      .home_change{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        padding-right: 8px;
        color: #2561ef;
      }
      .comments{
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        color: #2561ef;

      }
      .comments:hover{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .comments_change{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .request{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
      }
      .request:hover{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .request_change{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .subscribe{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
      }
      .subscribe:hover{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .subscribe_change{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .brand{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;

      }

      .brand:hover{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .brand_change{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
      }
      .ground{
        color: #2561ef;
        position: relative;
        top: 18%;
        width: auto;
        height: 50px;
        line-height: 48px;

      }
      .ground:hover{
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
        cursor: pointer;
      }

      .ground_change{
        color: #2561ef;
        background-color: #e7eefd;
        box-sizing: border-box;
        border-left: #2561ef 8px solid;
        padding-right: 8px;
        line-height: 48px;
        height: 50px;
        cursor: pointer;
      }

      .user{
        position: relative;
        top: 36%;
        width: auto;
        height: 50px;
        line-height: 48px;

      }

      .select{
        position: relative;
        top: 18%;
      }

      .right-box{
        position: absolute;
        margin-left: 13%;
        height: 100%;
        width: 86%;
        background-color: white;
        top:0;
        box-shadow: -2px 0 5px 0.115px #7e8994;
      }
      .right-box-top{
        position: relative;
        width: 100%;
        height: 55px;
        background-color: #ffffff;
        line-height: 48px;
        box-shadow: -2px 1px 5px 0.115px #7e8994;

      }
      .right-box-top img{
        position: relative;
        text-align: right;
        width: 35px;
        height: 35px;
        margin-left: 96%;
        top: 11px;
      }

      .right-box-bottom{
        height: auto;
        width: auto;

      }
</style>